<template>
    <p>count: {{ count }}</p>
    <p>countReadonly: {{ countReadonly }}</p>
</template>

<script>
import { readonly, ref } from 'vue'
export default {
  name: 'readonly',
  setup () {
    const count = ref(0)
    const countReadonly = readonly(count)
    setTimeout(() => {
      count.value = 20
    }, 2000)
    // setTimeout(() => {
    //   countReadonly.value = 30 // 报错Set operation on key "value" failed: target is readonly
    // }, 2000)
    return {
      count,
      countReadonly
    }
  }
}
// 结果：
// count: 0  countWatch: 0
// count: 20  countWatch: 20
</script>
